<template>
	<view class="content" v-if="isShow">
		<!-- 遮罩层 -->
		<view class="unify-mask-layer"></view>
		
		<!-- 写入内容 -->
		<view class="matter-window unify-radius unify-fixed unify-background-color unify-fade-in">
			<view class="iconfont unify-absolute" :class="{'el-icon-yiwen': status === 0, 'el-icon-jinggao-mian': status === 1}" :style="{'color': status === 0? '#FF6600': status === 1? '#FAAD00': ''}"></view>
			<view class="desc unify-absolute">{{content}}</view>
			<view class="base-btn unify-flex unify-absolute">
				<view class="base" @tap="tapCancel">{{cancel}}</view>
				<view class="base" @tap="tapAffirm">{{affirm}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			show: {
				type: Boolean,
				default: false
			},
			cancel: {
				type: String,
				default: '取消'
			},
			affirm: {
				type: String,
				default: '确认'
			},
			content: {
				type: String,
				default: '确认删除该收货地址？'
			},
			color: { // 提示：#FF6600   警告#FAAD00
				type: String,
				default: ''
			},
			status: { // 0提示  1警告
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				isShow: false
			}
		},
		methods: {
			// 更新显示
			updateShow() {
				this.isShow = this.show;
			},
			
			// 确认
			tapAffirm() {
				this.tapCancel()
				this.$emit('affirm')
			},
			
			// 关闭
			tapCancel() {
				this.isShow = false;
				this.$emit('cancel')
			}
		}
	}
</script>

<style lang="scss" scoped>
	$width: 566rpx;
	$height: 300rpx;
	// 遮罩层
	.unify-mask-layer {
		z-index: 999;
	}
	
	// 写入内容
	.matter-window {
		width: $width;
		height: $height;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
		z-index: 999;
		
		.iconfont {
			width: max-content;
			font-size: 100rpx;
			top: -40rpx;
			left: 0;
			right: 0;
			margin: auto;
			background-color: $uni-bg-color;
			border-radius: 50%;
		}
		
		.desc {
			width: max-content;
			max-width: 88%;
			height: max-content;
			font-size: $uni-font-size-base;
			color: $uni-text-color-grey;
			line-height: 45rpx;
			left: 0;
			right: 0;
			top: 0;
			bottom: 66rpx;
			margin: auto;
		}
		
		.base-btn {
			width: 100%;
			height: 86rpx;
			bottom: 0;
			align-items: center;
			border-top: 1rpx solid rgba($color: $uni-border-color, $alpha: .5);
			
			.base {
				flex: 1;
				height: inherit;
				line-height: 86rpx;
				text-align: center;
				font-size: $uni-font-size-lg;
			}
			
			.base:nth-child(1) {
				border-right: 1rpx solid rgba($color: $uni-border-color, $alpha: .5);
			}
		}
	}
</style>